<template>
  <!-- 布局 -->
  <el-container>
    <!-- 左侧导航栏 -->
    <el-aside width="200px">
      <el-menu
        default-active="/welcom"
        class="el-menu-vertical-demo"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        router
        style="border-right: none"
      >
        <el-menu-item index="/welcom">
          <i class="el-icon-setting"></i>
          <span slot="title">欢迎</span>
        </el-menu-item>

        <el-menu-item index="community">
          <i class="el-icon-setting"></i>
          <span slot="title">小区管理</span>
        </el-menu-item>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>帮买取快递废品回收</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/storemanage">门店管理</el-menu-item>
            <el-menu-item index="stationmanage">驿站管理</el-menu-item>
            <el-menu-item index="/goods">商品管理</el-menu-item>
            <el-menu-item index="1-4">选项2</el-menu-item>
            <el-menu-item index="1-5">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 头部标签 -->
      <el-header>
        <el-header>
          <div class="header-left">
            <i class="el-icon-s-fold icon"></i>
          </div>
          <div class="header-right">
            <!-- @command：是函数，专门处理下拉框中的请求事件的  -->
            <el-dropdown @command="handleCommand" trigger="click">
              <span class="el-dropdown-link">
                <img src="../assets/login_bg.jpg" alt="" /> 你好, 张三
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                <el-dropdown-item command="editPassword"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="system">系统设置</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
      </el-header>
      <!-- 右下标签 -->
      <el-main>
        <div>
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script scoped>
export default {
  methods: {
    // 处理顶部用户下拉框信息
    handleCommand(command) {
      //this.$message('click on item ' + command);
      if (command == "logout") {
        sessionStorage.removeItem("username");
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style>
.header-left {
  float: left;
}

.header-left .icon {
  font-size: 26px;
  padding-top: 17px;
  cursor: pointer;
}

.el-dropdown-link {
  cursor: pointer;
}

.header-right {
  float: right;
  line-height: 60px;
}

.header-right img {
  height: 50px;
  vertical-align: middle;
}

.el-aside {
  background-color: #304156;
  height: 100vh;
  width: 210px !important;
  /* background-color: aqua; */
}
.el-aside .el-menu {
  /* border-style: none; */
  height: 100vh;
}
.el-container .el-header {
  background-color: pink;
  height: 80px !important;
}
</style>